<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>个人信息</title>
				<link rel="stylesheet" href="../dist/css/pnotify.custom.min.css" />
		<script type="text/javascript" src="../dist/js/lib/jquery-2.2.1.js" ></script>
		<script type="text/javascript" src="../dist/js/pnotify.custom.min.js" ></script>
		<style>
		html,body{
			margin: 0 auto;
			padding: 0;
			font-family: '宋体';
			background: #effefe;
			font-weight: bolder;
			font-size: 0.9rem;
		}
		a{ text-decoration:none; color: #000000;}
		nav{
			display: block;
			height: 15rem;
			text-align: center;
			line-height: 25rem;
			width: 100%;
			background: #3367D6;
		}
	
		.items{ display:block; margin-left: 1rem;margin-right: 1rem; background: #FFFFFF; padding: 0.5rem; border-bottom:solid 1px black ;}
		.top1rem{ margin-top: 1rem;}
		.text{width: 3rem; display: inline-block; }
		label{line-height: 2rem;height: 2rem; margin: 0; padding: 0;display: inline-block;}
		input{background: none; border: none;}
		.right_edit{display: inline-block;float: right;height: 1.5rem;line-height:1.5rem; text-align: center; background: green; padding: 0.2rem; color: white; border-radius: 5px;box-shadow:2px 2px 5px #000080;}
		#head_icon{border-radius: 50%;text-align: center;width: 10rem; height: 10rem;}
		.log_out{background: red; color: white;text-align: center;box-shadow:2px 2px 5px #000080;}
		.nick{display: inline-block;width: 2rem;height:2rem;background: url(../dist/img/wdcs.png) no-repeat ; background-size: 100% 100%;}
		.count{display: inline-block;width: 2rem;height:2rem;background: url(../dist/img/mzsm.png) no-repeat ; background-size: 100% 100%;}
		.qq{display: inline-block;width: 2rem;height:2rem;background: url(../dist/img/logo_qq1.png) no-repeat ; background-size: 100% 100%;}
		.email{display: inline-block;width: 2rem;height:2rem;background: url(../dist/img/my_msg.png) no-repeat ; background-size: 100% 100%;}
		.file {
			    position: relative;
			    display: inline-block;
			    background: #D0EEFF;
			    border: 1px solid #99D3F5;
			    border-radius: 50%;
			    padding: 4px 4px;
			    overflow: hidden;
			    color: #1E88C7;
			    text-decoration: none;
			    text-indent: 0;
			    line-height: 1rem;
			}
			.file input {
			    position: absolute;
			    font-size: 100px;
			    right: 0;
			    top: 0;
			    opacity: 0;
			}
			.file:hover {
			    background: #AADFFD;
			    border-color: #78C3F3;
			    color: #004974;
			    text-decoration: none;
			}
			.back{
			position: absolute;
			top: 0.5rem;
			left: 0.4rem;
			width: 30px;
			height: 30px;
		}
		</style>
		
		
	</head>
	 <body >
		<nav>
			<img src="../dist/img/shake_back_normal.png"  class="back" onclick="goback()"/>
		   <a  class="file" >
			<img id='head_icon' src="../dist/img/sel_hd.png"/>
		    <input type="file" name='myFileName'size='28' accept='image/*;capture=camera' />
		   </a>
		</nav>
		
		<div class='items top1rem'>
			<i class="count"></i>
			<label  class='text'>账号：</label>
			<label  id='phone'  /></label>
			
		</div>
		<div class='items'>
			<i class="nick"></i>
			<label class='text'>昵称：</label>
			<label id='user_name'  /></label>
			<div class='right_edit' id='nick_e' onclick="editables(this,'user_name')">edit</div>
		</div>
		<div class='items'>
			<i class="qq"></i>
			<label  class='text'>Q Q：</label>
			<label id='qq'  /></label>
			<div class='right_edit' id='qq_e' onclick="editables(this,'qq')">edit</div>
		</div>
		<div class='items'>
			<i class="email"></i>
			<label  class='text'>email：</label>
			<label id='email'  /></label>
			<div class='right_edit' id='email_e' onclick="editables(this,'email')">edit</div>
		</div>
		<div class='items top1rem log_out' onclick="exit()">
			退出登录
		</div>
		<script>
			var locastorage=storagObj();
			
			var nick,phone,qq,email,head_icon;
		        nick=document.getElementById("user_name");
				phone=document.getElementById("phone");
				qq=document.getElementById("qq");
				email=document.getElementById("email");
				head_icon=document.getElementById("head_icon");
			init()
			function editables(el,id){
				var up=document.getElementById(id);
				if(el.innerText=='edit'){
					el.style.background="red";
					el.innerText='save';
					up.style.width="3rem";
					up.style.border="1px"
					up.setAttribute("contenteditable",true);
				}else if(el.innerText=='save'){
					el.style.background="green";
					el.innerText='edit';
					up.setAttribute("contenteditable",false);
					updateInfo(id)
				}
				
			}
			var user;
			function init(){
				user=JSON.parse(locastorage.getItem('user'));
				
				nick.innerText=(!user.user_name)?"":user.user_name;
				phone.innerText=(!user.phone)?"":user.phone;
				qq.innerText=(!user.qq)?"":user.qq;
				email.innerText=(!user.email)?"":user.email;
				if(user.head_icon){
					head_icon.src=user.head_icon;
				}
			}
			
			function updateInfo(key){
				var obj=document.getElementById(key);
				var txt=obj.innerText;
				var param={'id':user.id,key:txt}
				$.ajax({  
		        url: "../updateInfo?id="+user.id+"&"+key+"="+txt,  
		        type: 'post',  
		        success: function (returndata) {
		            var list=JSON.parse(returndata);
		             console.log(list)
		            if(list[0].code=='10010'){
		                msg(list[0].msg,'success');
		                locastorage.setItem('user',JSON.stringify(list[1]));
		            }else{
		            	msg(list[0].msg,'error');
		            	
		            }
		          
		        },  
		        error: function (returndata) {  
		        	msg("加载失败",'error');
		        }  
		    });
			}
			
			function msg(str,tp){
	   
			   var notice= new PNotify({
				    title: '提示信息',
				    text: str,
				    type: tp,
				     buttons: {
				        closer: false,
				        sticker: false
				    }
				});
				setTimeout(function(){
					notice.remove();
				},1000)
		   }
				
			function storagObj(){
					if (typeof(Storage) !== "undefined") {
				        return localStorage;
					} 
				}
			
			function getImg(src) {
				head_icon.src=src;
			}
			
			function exit(){
				 locastorage.setItem('user',null);
				 window.location.href='list.html'
				 window.AndroidWebView.showInfoFromJs('返回')
			}
		function goback(){
			window.history.back(-1);
			window.AndroidWebView.showInfoFromJs('返回')
		}	
		</script>
	 </body>
</html>

